﻿@page "/checkboxlists"

<h3>CheckboxList 多选框组</h3>

<h4>控件用于创建多选的复选框组</h4>

<Block Title="基础用法" Introduction="通过数据绑定展现复选框组">
    <p>使用说明：</p>
    <ul class="ul-demo">
        <li>通过 <code>bind-Value</code> 设置双向绑定数据值</li>
        <li>通过 <code>Items</code> 设置候选数据源</li>
        <li>通过 <code>OnSelectedChanged</code> 回调方法获取改变项实例</li>
    </ul>
    <CheckboxList @bind-Value="@Value1" Items="@Items1"
                  OnSelectedChanged="@OnSelectedChanged"></CheckboxList>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="客户端验证" Introduction="内置于 ValidateForm 中使用">
    <p>可以通过改变窗口大小，体验自适应布局</p>
    <p>本例中绑定模型 <code>BindItem</code> 的 <code>Name</code> 字段，通过勾选项自动更改模型数据</p>
    <p>由于内置于 <code>ValidateForm</code> 表单内，本例中增加了 <code>RequiredAttribute</code> 必选要求验证，当取消所有选项后提示验证结果</p>
    <ValidateForm Model="@Dummy">
        <div class="form-inline">
            <div class="row">
                <div class="form-group col-12">
                    <CheckboxList @bind-Value="@Dummy.Name" Items="@Items2" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-auto col-form-label">
                <div>绑定值：</div>
            </div>
            <div class="col">
                <div class="form-control">@Dummy.Name</div>
            </div>
        </div>
    </ValidateForm>
</Block>

<Block Title="双向绑定集合" Introduction="绑定值为集合">
    <p>TValue 设置为 <code>IEnumerable&lt;int&gt;</code> 泛型集合，绑定集合的 <code>ValueField</code> 指定字段必须与泛型类型一致</p>
    <CheckboxList TValue="IEnumerable<int>" Items="@Items3" @bind-Value="@Value2" />
    <div class="row mt-3">
        <div class="col-auto col-form-label">
            <div>绑定值：</div>
        </div>
        <div class="col">
            <div class="form-control">@(string.Join(",", Value2))</div>
        </div>
    </div>
    <p class="mt-3">TValue 设置为 <code>IEnumerable&lt;string&gt;</code> 泛型集合</p>
    <CheckboxList TValue="IEnumerable<string>" Items="@Items4" @bind-Value="@Value3" />
    <div class="row mt-3">
        <div class="col-auto col-form-label">
            <div>绑定值：</div>
        </div>
        <div class="col">
            <div class="form-control">@(string.Join(",", Value3))</div>
        </div>
    </div>
</Block>

<Block Title="双向绑定枚举" Introduction="绑定值为枚举">
    <p>当 <code>CheckboxList</code> 绑定一个枚举集合时，<code>Items</code> 不需要指定，<code>Items</code> 会被自动设置成枚举里面所有的值，如果需要绑定部分值时，请自行提供枚举集合 <code>Items</code></p>
    <CheckboxList @bind-Value="@SelectedEnumValues" />
    <div class="row mt-3">
        <div class="col-auto col-form-label">
            <div>绑定值：</div>
        </div>
        <div class="col">
            <div class="form-control">@(string.Join(",", SelectedEnumValues))</div>
        </div>
    </div>
</Block>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />
